<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/yy'}">1170</el-breadcrumb-item>
      <el-breadcrumb-item>修改记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="修改记录信息" type="info" :closable="false" show-icon center> </el-alert>
      <el-steps :active="activeIndex - 0" finish-status="success" align-center :space="200">
        <el-step title="基本信息"></el-step>
        <!-- <el-step title="记录参数"></el-step>
        <el-step title="记录属性"></el-step> -->
        <el-step title="图片"></el-step>
        <el-step title="内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px" label-position="top">
        <el-tabs tab-position="left" v-model="activeIndex">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="预警详情" prop="describle">
              <el-input v-model="editForm.describle"></el-input>
            </el-form-item>
            <!-- <el-form-item label="提出人" prop="proposer">
              <el-input v-model="editForm.proposer"></el-input>
            </el-form-item> -->
            <el-form-item label="影响程度" prop="incidence">
              <el-select v-model="editForm.incidence" placeholder="请选择">
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="设备状态" prop="equipment_status">
              <el-select v-model="editForm.equipment_status" placeholder="请选择">
                <el-option
                  v-for="item1 in equipmentStateList"
                  :key="item1.value"
                  :label="item1.label"
                  :value="item1.value">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="离线时间">
              <el-date-picker
                v-model="editForm.offline_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>              
            </el-form-item>                         -->
            <el-form-item label="预警处理" prop="deal">
              <el-input v-model="editForm.deal"></el-input>
            </el-form-item>              
            <!-- <el-form-item label="预计解决时间">
              <el-date-picker
                v-model="editForm.solve_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>              
            </el-form-item> -->
            <el-form-item label="维护日期">
              <el-date-picker
                v-model="editForm.maintenance_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>              
            </el-form-item>               
            <!-- <el-form-item label="负责人" prop="responsible_person">
              <el-input v-model="editForm.responsible_person"></el-input>
            </el-form-item>                                              -->
          </el-tab-pane>
          <el-tab-pane label="记录图片" name="1">
            <el-upload :action="uploadPath" :on-preview="handlePreview" :on-success='handleSuccess' :on-remove="handleRemove" :file-list="fileList" :headers="headerObj" list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-button type="primary" class="btn-add" size="mini" @click="editDevices()">确认</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>

    <el-dialog title="图片预览" :visible.sync="previewVisible" width="80%" :close-on-click-modal="false">
      <img :src="previewPath" class="preview-img" />
    </el-dialog>
  </div>
</template>

<script>
import { basePath,uploadPath } from '../../../.env.development'
import _ from 'lodash'
export default {
  created() {
    this.getDevicesById()
    this.getCateList()
  },
  data() {
    return {
      basePath,
      uploadPath,
      activeIndex: '0',
      editFormRules: {
        describle: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
        // proposer: [{ required: true, message: '请输入提出人', trigger: 'blur' }],        
      },
      editForm: {
        describle: '',
        proposer: null,
        incidence: '',
        responsible_person: '',
        deal: '',
        solve_date: '',
        offline_date: '',
        equipment_status: '',
        // 图片的数组
        pics: []
      },
      headerObj: {
        Authorization: JSON.parse(sessionStorage.getItem('userInfo')).token,
      },
      previewVisible: false,
      cateList: [],
      stateList:[{
          value: '1',
          label: '红色预警'
        }, {
          value: '2',
          label: '橙色预警'
        },
        {
          value: '3',
          label: '黄色预警'
        },
        {
          value: '4',
          label: '蓝色预警'
        }        ],
      // equipmentStateList:[{
      //     value: '4',
      //     label: '在线'
      //   }, {
      //     value: '5',
      //     label: '离线'
      //   }],        
      manyData: [],
      onlyData: [],
      cascaderProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
        expandTrigger: 'hover',
      },
      previewPath: '',
      fileList: []
      // selectedKeys: [],
      // cascadeProps: {
      //   label: 'cat_name',
      //   value: 'cat_id',
      //   expandTrigger: 'hover',
      //   checkStrictly: true,
      // },
    }
  },
  methods: {
    async getDevicesById() {
      console.log('getDevicesById query', this.$route.query)
      const { data: res } = await this.$http.get(`yy/${this.$route.query.id}`)
      console.log('getDevicesById res', res)
      if(!res.pics){
        res.pics = []
      }
      if (res.pics.length === 0){
        // res.pics = []
        this.editForm = res
        return
      }

      res.pics.forEach(item => {
        this.fileList.push({
          name: item.pic_id,
          url: basePath + item.pic,
          temp_path: item.pic
      })
      this.editForm = res
      console.log('getDevicesById res', res)
    })  
    },
    handlePreview(file) {
      this.previewVisible = true
      this.previewPath = file.url
      console.log(file)
    },
    handleSuccess(response) {
      this.editForm.pics.push({'pic':response.data.temp_path, pic_id:Math.floor(Math.random () * 9000)+1000,'url': basePath + response.data.temp_path})
      console.log('handleSuccess response', this.editForm)
    },
    handleRemove(file) {
      console.log('edit handleRemove file', file)
      const filePath = file.temp_path || file.response.data.temp_path
      console.log('edit handleRemove filePath', filePath)
      const i = this.editForm.pics.findIndex(item => item.pic === filePath)
      console.log('handleRemove i',i)
      this.editForm.pics.splice(i,1)
      console.log('handleRemove pics',this.editForm.pics)
    },
    async getCateList() {
      const { data: res } = await this.$http.get('cate_display/')
      this.cateList = res.data
      this.total = res.total
      console.log('edit cate res', res.data)
      // this.$message.success('获取角色成功')
    },
  editDevices() {
    this.$refs.editFormRef.validate(async valid => {
      if(!valid){
        return 
      }
      const form = _.cloneDeep( this.editForm)

      //发送请求
      console.log('editDevices form', form)
      const {data:res} = await this.$http.put(`yy/${this.editForm.index}/`,form)
      console.log('editDevices res', res)
      this.$message.success('修改记录成功')
      this.$router.push('/yy')
    })
  }
  },
}
</script>
<style lang="less" scoped>
.preview-img {
  width: 100%;
}
.el-checkbox{
  margin-right: 10px;
}
.btn-add{
  margin-top: 15px;
}
</style>